<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app">
        <!-- 点击按钮时触发 changeContent 方法，并传递事件对象 -->
        <button @click="changeContent($event)">点击改变</button>
        <br />
        <!-- 点击链接时触发 handleClick 方法，传递自定义消息和事件对象，并阻止默认的链接跳转行为 -->
        <!-- <a href="https://www.baidu.com" @click="handleClick('禁止打开',$event)">打开链接</a> -->
        <a href="https://www.baidu.com" @click.prevent="handleClick('禁止打开',$event)">打开链接</a>
    </div>
    <script src="../js/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#app", 
            data: {
                // 这里可以定义数据
            },
            methods: {
                changeContent(event) { 
                    // 打印出触发点击事件的事件对象
                    console.log(event);
                },
                handleClick(message, event) { 
                    // 阻止链接的默认跳转行为
                    // event.preventDefault();
                    // 弹出包含自定义消息的警告框
                    window.alert(message);
                    // 在控制台打印自定义消息
                    console.log(message);
                }
            }
        })
    </script>
</body>
</html>